<template>
  <div class="app-container">
    <el-form ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="产品日期">
        <el-date-picker
          v-model="date"
          type="datetime"
          placeholder="选择日期时间"
          align="right"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="仰角选择">
        <el-button-group>
          <el-button type="primary" icon="el-icon-plus" @click="increaseAngle"></el-button>

        </el-button-group>
        <el-select v-model="angle" placeholder="选择仰角" @change="updateInput">
          <el-option
            v-for="(item, index) in angleList"
            :key="index"
            :label="item.toFixed(6)"
            :value="item"
          />
        </el-select>
        <el-button icon="el-icon-minus" @click="decreaseAngle"></el-button>
      </el-form-item>
      <el-form-item style="padding-left:20px">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 走马灯 -->
    <el-container>
      <el-main style="display: flex; justify-content: center; align-items: center; height: 100%;">
        <el-carousel :autoplay="false" ref="carousel"
                     style="text-align: center;  height:100%;width: 100%;"
                     arrow="always" @change="handleCarouselChange" indicator-position="outside"
        >
          <el-carousel-item
            style="width: 100%;  /* 让图片宽度填满容器 */
            height: auto; /* 高度自适应，以保持比例 */
            object-fit: cover; " v-for="image in imageList">
            <el-image :src="image" alt="轮播图" style="max-width: 800px" :preview-src-list="[image]"
            >
              <div slot="error">
                <el-image :src="require('@/assets/404_images/404.png')"
                          style="height: 100%; width: auto; max-width: 100%;"></el-image>
              </div>
            </el-image>
          </el-carousel-item>
        </el-carousel>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import moment from "moment";
import {getLatestName, getByTime} from "@/api/system/radarLog";

export default {
  name: "REF",
  mounted() {
    this.getDefaultProduct()
  },
  data() {
    return {
      date: '',
      productName: "KDP",
      // 包含数据的仰角列表
      angleList: [0.48339844, 1.4941406, 2.4169922, 3.3398438, 4.3066406, 5.229492, 6.196289, 7.5146484, 8.701172, 10.019531, 11.99707, 14.018555, 16.699219, 19.511719],
      imageList: [],
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      currentName: "",
      angle: 0.48339844,//当前选择的仰角 默认第一层
      filePrefix: this.$config.productPath + "KDP/",//存放的目录前缀
    }
  },
  methods: {
    handleQuery() {
      const newdate = moment(this.date).format('YYYYMMDDHHmm')
      getByTime({date: newdate}).then(response => {
        if (response.msg == null) {
          this.$message.error("当前时间没有产品")
        } else {
          this.currentName = newdate
          this.imageList = this.angleList.map((_, index) => {
            return `${this.filePrefix}${index + 1}/${this.currentName}.png`
          })
          this.angle = this.angleList[0]
        }
      })
    },
    resetQuery() {
      this.getDefaultProduct()
    },
    // 点击切换走马灯
    handleCarouselChange(val) {
      this.angle = this.angleList[val]
    },

    updateInput() {
      // 在选择框变化时更新输入框的值
      const index = this.angleList.indexOf(this.angle);
      this.$refs.carousel.setActiveItem(index);
    },
    increaseAngle() {
      const currentIndex = this.angleList.indexOf(this.angle);
      if (currentIndex < this.angleList.length - 1) {
        this.angle = this.angleList[currentIndex + 1];  // 增加仰角
      }
      this.updateInput()
    },
    decreaseAngle() {
      const currentIndex = this.angleList.indexOf(this.angle);
      if (currentIndex > 0) {
        this.angle = this.angleList[currentIndex - 1];  // 减少仰角
      }
      this.updateInput()
    },
    getDefaultProduct() {
      getLatestName().then(response => {
        // 绑定当前日期
        this.date = moment(response.msg, 'YYYYMMDDHHmm').toDate()
        this.currentName = response.msg //补上秒钟
        this.imageList = this.angleList.map((_, index) => {
          return `${this.filePrefix}${index + 1}/${this.currentName}.png`
        })
      })
    }
  }
}
</script>

<style scoped>
.center-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

/deep/ .el-carousel__container {
  position: relative;
  /*height: 100%;*/
  max-height: 800px;
  min-height: 600px;
}

</style>
